<template>
  <div
    id="dataPie"
    :style="{ height: '340px', width: '86%', paddingLeft: '6%' }"
  />
</template>

<script>
  import { ChartResizeMixin } from '@/mixins/ChartResizeMixin'
  import * as echarts from 'echarts';

  export default {
    name: 'DataPie',
    mixins: [ChartResizeMixin],
    props: {
      dataInfo: {
        type: Array,
        default: () => ([])
      }
    },
    watch: {
      dataInfo(val) {
        if (val.length > 0) {
          this.drawChart()
          window.addEventListener('resize', this.resize)
        }
      }
    },
    methods: {
      drawChart() {
        this.chart = echarts.init(document.getElementById('dataPie'))
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}条 ({d}%)'
          },
          legend: {
            bottom: "bottom"
          },
          label: {
            formatter: (item) => item.name + '：' + item.value + '条' + ' (' + item.percent + '%)'
          },
          series: [{
            name: '数据占比',
            // label: {
            //   show: false
            // },
            type: 'pie',
            color: ['#C23531', '#749F83'],
            data: this.dataInfo.map(item => {
              return {
                name: item.labelCnName,
                value: item.count
              }
            }),
            center: ["50%", "47%"],
            radius: ["37%", "69%"],
            bottom: '8%',
          }]
        }
        this.chart.setOption(option)
      },
    },
  }
</script>